<extend name="Layout/ins_page" />
<block name="content">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Form</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link href="/sap/demo.css" rel="stylesheet" type="text/css" />
    <script src="/sap/scripts/boot.js" type="text/javascript"></script>
</head>
<style>

td{
      margin-top:10px;     
    
}
</style>
<body>
    <div id="form1" >
        <input name="id" class="mini-hidden"  value="{$data.item_id}"/>
        <table cellspacing='10' style="width: 700px; border-spacing:0px 10px;" >
			
			  <tr>
                <td>
                    <label for="textbox1$text">主图：</label>
                </td>
                <td>
             		<div id='showimg'>
             		<?php $imglist = explode(',',$data['logo']);
             		foreach($imglist as $voimg){
					   if($voimg)
						echo "<img id='simg' class='group-picture' width='100px' height='100px' src='$voimg' alt='物料图' >";
					}
             		
             		?>
		     	     
		     	    </div>
		        	<a href="javascript:;" class="a-upload" onclick="$('#group-picture1').click()" > 上传图片</a>
		            <input type="file" id='group-picture1' name="group-picture" id="group-picture1" style="display: none; "  multiple="true">  
		  			<input  name="logo" id='logo-input' class="mini-textbox" required="false" width='250px'  value ="{$data.logo}" style="display: none""/> 
                
           
                </td>
            </tr>

            <tr>
                <td>
                    <label for="textbox1$text">水印文字：</label>
                </td>
                <td>
                    <input required="true" name="waterMarkText" class="mini-textbox" value="" width="250px" />
                </td>
            </tr>

            <tr>
                <td>
                    <label for="textbox1$text">水印位置：</label>
                </td>
                <td>

                    <input required="true"  name="thePosition" showNullItem="true" class="mini-combobox" data='[{ "id": "top-left", "text": "左上" },
{ "id": "top", "text": "顶部" },
{ "id": "top-right", "text": "右上" },
{ "id": "center-left", "text": "左中" },
{ "id": "center", "text": "中部" },
{ "id": "center-right", "text": "右中" },
{ "id": "bottom-left", "text": "左下" },
{ "id": "bottom", "text": "底部" },
{ "id": "bottom-right", "text": "右下" },]' valueField="id" textField="text"   value="" />

                </td>
            </tr>


			<tr>
                <td>

                </td>
                <td>

                    <a class='mini-button' onclick="mergeImages()" >生成合成图</a>
                    
                </td>
            </tr>

            <tr>
                <td>

                    <label for="textbox1$text">合成图：</label>

                </td>
                <td>

                    <div id='mergedimg'>
                    </div>

                </td>
            </tr>
            
        </table>
    </div>
    <script type="text/javascript">
        mini.parse();
    </script>
    
    
    
    <script>  
        $(function(){  
            $("#group-picture1").change(function(event) {  
                var img=event.target.files;  
                for(var i=0;i<img.length;i++){
                if(!img){  
                    return false;  
                }  
                if(!(img[i].type.indexOf('image')==0 && img[i].type && /\.(?:jpg|png|gif|jpeg)$/.test(img[i].name)) ){
                    gritter('图片只能是jpg,gif,png,jpeg');
                    return false;    
                }   
                var reader = new FileReader();  
                reader.readAsDataURL(img[i]);  
                reader.onload = function(e){  
                     $.post("/upload.php", {imga:e.target.result},function(ret){
                         if(ret.img!=''){

                             // check image size beginning
                             image=new Image();
                             image.src=ret.picUrl;
                             image.onload=function() {
                                 console.log('upload success');
                                 var html = ' <img id="" class="group-picture" width="100px" height="100px" src="'+ret.picUrl+'" >  '
                                 $('#showimg').append(html);
                                 mini.get('logo-input').setValue( mini.get('logo-input').getValue()+ret.picUrl+',');
                             }
                             // check image size end

                         }else{
                            console.log('upload fail');    
                        }    
                    },'json');    
                }  
                }
            });  
        });  
    </script>

    <script>
        $(function(){
            $("#group-picture2").change(function(event) {
                var img=event.target.files;
                for(var i=0;i<img.length;i++){
                    if(!img){
                        return false;
                    }
                    if(!(img[i].type.indexOf('image')==0 && img[i].type && /\.(?:jpg|png|gif)$/.test(img[i].name)) ){
                        gritter('图片只能是jpg,gif,png');
                        return false;
                    }
                    var reader = new FileReader();
                    reader.readAsDataURL(img[i]);
                    reader.onload = function(e){
                        $.post("/upload.php", {imga:e.target.result},function(ret){
                            if(ret.img!=''){

                                // check image size beginning
                                image=new Image();
                                image.src=ret.picUrl;
                                image.onload=function() {

                                        console.log('upload success');
                                        var html = ' <img id="" class="group-picture" width="100px" height="100px" src="'+ret.picUrl+'" alt="物料详情图" >  '
                                        $('#showimgB').append(html);
                                        mini.get('detail_image-input').setValue( mini.get('detail_image-input').getValue()+ret.picUrl+',');

                                }
                                // check image size end

                            }else{
                                console.log('upload fail');
                            }
                        },'json');
                    }
                }
            });
        });
    </script>

    <script type="text/javascript">

        $(document).ready(function() {
            var uploaders = {};
            $('.uploader').each(function() {
                var uploader, $target, $id;
                $target = $(this);
                $id = $target.attr('add_file_id');
                $btn_id = 'btn_' + $id;
                $uploader_id = 'uploader_' + $id;

                settings = {
                    runtimes : 'html5,flash',
                    browse_button : $btn_id, // you can pass in id...
                    container : document.getElementById($uploader_id),
                    url : upload_url,
                    flash_swf_url : app_path + '/Public/Static/plupload/Moxie.swf',
                    filters : {
                        max_file_size : '1000mb'
                    }
                };

                uploader = new plupload.Uploader(settings);
                uploaders[$id] = uploader;

                function FilesAdded(up, files) {

                    for (var i in files) {
                        var str = JSON.stringify(files);

                        if( files[i].id!=null){

                            html = '<li class="tbody" id="' + files[i].id + '">\n';

                            html += '<div class="loading"></div>\n';
                            html += '<div class="data">\n';

                            html += '<span class="del text-center"><a class="link del">删除</a></span>\n';

                            html += '<span class="size text-right">' + plupload.formatSize(files[i].size) + '</span>';
                            html += '<span class="auto autocut">' + files[i].name + '</span>';
                            html += '</li>';
                            html += '</div>\n';

                            $('#uploader_' + $id + ' .file_list').append(html);
                        }
                    }
                    up.start();
                }

                uploader.bind("PostInit", function(up) {
                    if ($(".uploader .tbody").length > 0) {
                        $(".uploader .tbody .loading").css("width", "100%");
                        $(".uploader .thead").show();
                        $(".uploader .tbody").each(function() {
                            id = $(this).attr("filename");
                            filename = $(this).attr("filename");
                            size = $(this).attr("size");
                            file = new plupload.File(id, filename, size);
                            file.status = plupload.DONE;
                            count = uploader.files.length;
                            uploader.files[count] = file;
                            path = 'hhhhhhh';
                        });
                    }
                });

                uploader.init();

                uploader.bind('FilesAdded', FilesAdded);

                uploader.bind("UploadProgress", function(up, file) {
                    $("#" + file.id).find("a.del").hide();
                    $("#" + file.id).find('.loading').css("width", file.percent + "%");
                });

                uploader.bind('FileUploaded', function(up, file, data) {
                    var myObject = eval('(' + data.response + ')');
                    if (myObject.status) {
                        if ($("#add_file_" + $id).length != 0) {
                            $("#add_file_" + $id).val($("#add_file_" + $id).val() + myObject.sid + ";");
                        }
                        $("#" + file.id).attr("add_file", myObject.sid);

                        $new_upload = $("#uploader_" + $id + " .file_list").attr("new_upload");
                        $("#uploader_" + $id + " .file_list").attr("new_upload", $new_upload + myObject.sid + ";");

                        $("#" + file.id).find("a.del").show();
                    } else {
                        ui_alert(myObject.info, function() {
                            $("#" + file.id).remove();
                        });
                    }
                });
            });
        });

        window.onbeforeunload = function(e) {
            e = e || window.event;
            // For IE and Firefox prior to version 4
            $new_upload = $(".file_list").attr("new_upload");
            if ($new_upload !== undefined) {
                if ($new_upload.length) {
                    if (e) {
                        e.returnValue = '上传的附件将被删除，确定退出吗？';
                    }
                    // For Safari
                    return '上传的附件将被删除，确定退出吗？';
                }
            }
        };

        $(document).on("click", ".uploader a.del", function() {
            $obj = $(this).parents("li");
            $uploader = $(this).parents('.uploader');
            ui_confirm("确定要删除吗？", function() {

                $current_del_file = $obj.attr("add_file");
                $(".add_file", $uploader).val($(".add_file", $uploader).val().replace($current_del_file + ";", ""));

                $new_upload = $(".file_list", $uploader).attr("new_upload");
                $(".file_list", $uploader).attr("new_upload", $new_upload.replace($current_del_file + ";", ""));

                $obj.remove();
            });
        });
    </script>

<script>
    function mergeImages() {

        var form = new mini.Form("#form1");
        form.validate();
        if (form.isValid() == false) return;

        var data = form.getData();

        var img = data.logo;
        if(img) {
            console.log(img);
        }else{
            alert("上传主图");
            return;
        }

        var waterMarkText = data.waterMarkText;

        var thePosition = data.thePosition;

        /*
        var f=document.createElement("form");
        f.action="/SapSupplier/domergeimages";
        f.method="post";
        f.innerHTML=" <input type='hidden' name='img' value='"+img+"'/>"+
            "<input type='hidden' name='waterMarkText' value='"+waterMarkText+"'/>" +
            "<input type='hidden' name='thePosition' value='"+thePosition+"'/>"
        ;
        document.body.appendChild(f);
        f.submit();
        */

        /*
        mini.open({
            url:  "/SapSupplier/domergeimages",
            title: "合成图片",
            width: 650,
            height: 380,
        });
        */

        var json = mini.encode(data);
        $.ajax({
            url: "/SapSupplier/domergeimages",
            data: { data: json },
            success: function (text) {
                var html = ' <img id="" class="group-picture" width="300px" height="300px" src="'+text+'" >  '
                $('#mergedimg').html('');
                $('#mergedimg').html(html);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });

    }
</script>

</body>
</html>

</block>
<block name="js">
</block>